<template>
  <div class="pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入药品名称"
              class="w-200"
              clearable
              @clear="query" />
    <el-button type="primary"
               @click="query">查 询</el-button>
    <el-button type="primary"
               @click="editDrug(null)">新 增</el-button>
    <el-table border
              stripe
              :data="dataList"
              style="width: 100%"
              class="mt-20">
      <el-table-column align="center"
                       label="图标"
                       width="100px"
                       heitht="50px">
        <template slot-scope="scope">
          <el-image :src="scope.row.imageUrl"
                    :preview-src-list="[scope.row.imageUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="name"
                       label="名称"
                       min-width="100">
      </el-table-column>
      <el-table-column align="center"
                       prop="factoryName"
                       label="厂商"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="drugBrandName"
                       label="品牌"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="录入时间"
                       min-width="120"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column label="操作"
                       width="180"
                       align="center">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="editDrug(scope.row.id)">编 辑
          </el-button>
          <el-button type="danger"
                     @click="deleteData(scope.row.id)">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="initTableData"
          :pageTotal="totals"
          ref="page"></page>
    <el-dialog title="药品详情"
               width="40%"
               :close-on-click-modal="false"
               :visible.sync="dialogFormVisible">
      <el-form :model="drugDetail">
        <el-form-item :label-width="formLabelWidth"
                      label="图标">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="drugDetail.imageUrl"
                 :src="drugDetail.imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-form-item :label-width="formLabelWidth"
                        label="通用名称">
            <el-input v-model="drugDetail.name"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="英文名称">
            <el-input v-model="drugDetail.enName"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="产品全称">
            <el-input v-model="drugDetail.productName"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="拼音缩写">
            <el-input v-model="drugDetail.pinyinAbbreviation"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="厂家">
            <el-select v-model="drugDetail.factoryId"
                       @change="initBand">
              <el-option v-for="item in factoryList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="drugDetail.drugBrandId">
              <el-option v-for="item in drugBrandList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary"
                       icon="el-icon-edit"
                       @click="addFactory"></el-button>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="适应症">
            <el-input type="textarea"
                      v-model="drugDetail.indication"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="成份">
            <el-input type="textarea"
                      v-model="drugDetail.ingredients"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="药物分类">
            <el-input type="textarea"
                      v-model="drugDetail.drugClassification"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="注意事项">
            <el-input type="textarea"
                      v-model="drugDetail.precautions"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="用法用量">
            <el-input type="textarea"
                      v-model="drugDetail.dosage"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="不良反应">
            <el-input type="textarea"
                      v-model="drugDetail.adverseReactions"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="规格">
            <el-input v-model="drugDetail.specification"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="包装">
            <el-input type="textarea"
                      v-model="drugDetail.packet"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="有效期">
            <el-input v-model="drugDetail.expiration"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="药物相互作用">
            <el-input type="textarea"
                      v-model="drugDetail.medicineInteractions"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="禁忌">
            <el-input type="textarea"
                      v-model="drugDetail.taboo"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="批准文号">
            <el-input v-model="drugDetail.approvalNumber"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth"
                        label="生产企业">
            <el-input v-model="drugDetail.manufacturer"></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveData()">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增厂商"
               :visible.sync="centerDialogVisible"
               width="30%"
               center>
      <el-form :model="factoryDetail">
        <el-form-item :label-width="formLabelWidth"
                      label="厂商名称">
          <el-input v-model="factoryDetail.name"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="品牌名称">
          <el-input v-model="factoryDetail.bandName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveFactoryInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    name: "drugLibList",
    data () {
      return {
        searchCondition: '',
        totals: 0,
        pageSize: 10,
        dataList: [],
        loading: false,
        dialogFormVisible: false,
        centerDialogVisible: false,
        drugDetail: {},
        formLabelWidth: '120px',
        imageUploadUrl: this.api.hospitalManager.uploadImg,
        factoryList: [],
        drugBrandList: [],
        factoryDetail: {
          id: null,
          name: "",
          drugBrandId: null,
          bandName: ""
        }
      }
    },
    created () {
      this.initTableData();
      this.initBaseData();
    },
    methods: {
      initBand (factoryId) {
        if (factoryId)
          this.post(this.api.drug.getDrugBrandList, { "factoryId": factoryId }).then((res) => {
            if (res.data.code === '200') {
              this.drugBrandList = res.data.object;
            }
          });
      },
      addFactory () {
        let factoryId = this.drugDetail.factoryId;
        let drugBrandId = this.drugDetail.drugBrandId;
        let factoryName = "";
        let bandName = "";
        if (factoryId) {
          for (let i = 0; i < this.factoryList.length; i++) {
            if (this.factoryList[i].id === factoryId) {
              factoryName = this.factoryList[i].name;
            }
          }
        }
        if (drugBrandId) {
          for (let i = 0; i < this.drugBrandList.length; i++) {
            if (this.drugBrandList[i].id === drugBrandId) {
              bandName = this.drugBrandList[i].name;
            }
          }
        }
        this.factoryDetail = {
          id: factoryId,
          name: factoryName,
          drugBrandId: drugBrandId,
          bandName: bandName
        }
        this.centerDialogVisible = true;
      },

      saveFactoryInfo () {
        this.post(this.api.factory.saveFactoryInfo, this.factoryDetail).then((res) => {
          if (res.data.code === '200') {
            this.centerDialogVisible = false;
            this.initBaseData();
            this.drugDetail.factoryId = res.data.object.id;
            this.initBand(this.drugDetail.factoryId);
          }
        });
      },

      initBaseData () {
        this.post(this.api.factory.getFactoryList, {}).then((res) => {
          if (res.data.code === '200') {
            this.factoryList = res.data.object;
          }
        });
      },
      query () {
        this.page.pageIndex = 0;
        this.initTableData();
      },
      initTableData () {
        let param = {
          name: this.searchCondition,
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex
        };
        this.post(this.api.drug.getDrugPageApp, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          }
        });
      },
      formatterDate (row) {
        if (row.createTime) {
          return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss');
        } else {
          return '--';
        }
      },
      editDrug (id) {
        if (id) {
          let param = {
            id: id
          };
          this.post(this.api.drug.getDrugDetail, param).then((res) => {
            if (res.data.code === '200') {
              this.drugDetail = res.data.object;
              this.dialogFormVisible = true;
            }
          });
        } else {
          this.drugDetail = {
            factoryId: null,
            drugBrandId: null,
            imageUrl: "",
            name: "",
            enName: "",
            productName: "",
            pinyinAbbreviation: "",
            taboo: "",
            precautions: "",
            medicineInteractions: "",
            approvalNumber: "",
            manufacturer: "",
            drugClassification: "",
            ingredients: "",
            indication: "",
            dosage: "",
            adverseReactions: "",
            specification: "",
            packet: "",
            expiration: ""
          };
          this.dialogFormVisible = true;
        }
      },
      deleteData (id) {
        let param = {
          id: id
        };
        this.post(this.api.drug.deleteDrug, param).then((res) => {
          if (res.data.code === '200') {
            this.initTableData();
            this.$message.success(res.data.message);
          }
        });
      },
      saveData () {
        this.post(this.api.drug.saveDrugLib, this.drugDetail).then((res) => {
          if (res.data.code === '200') {
            this.initTableData();
            this.$message.success(res.data.message);
            this.dialogFormVisible = false;
          }
        });
      },
      handleAvatarSuccess (res) {
        this.drugDetail.imageUrl = res.data;
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    }
    ,
    computed: {
      ...mapGetters(['page'])
    }
    ,
    components: {
      Page,
    }
  }
</script>

<style scoped>
</style>
